博客现已用React重写

提醒：本文最后更新于 2049 天前，文中所描述的信息可能已发生改变，请谨慎使用。

伊始

6月份照着EYHN的博客幻想贴，用原生JS和MDUI完成了博客。

到了上个月也就是7月份时打算学习React，于是准备用React重写一遍博客。

看了一点React的官方文档，有点头痛，于是找到B站UP主marking1212翻译、mosh制作的React教程av34619096，大致了解了React的使用方法后，开撸！

Material-UI

我保证Material是我这半个月来背的最熟的单词，因为这半个月我不知道搜索了多少次Material-UI相关的问题。

之前博客使用的是MDUI，这次决定使用很🔥的Material-UI。使用这个UI框架可是让我吃尽了苦头，很多API并没有在文档里写出来，需要自己在官网DEMO里一点点找，这一点我在Stackoverflow上也看到很多人吐槽。

React

React用起来非常的爽快，只关心数据的加载，再不用去操作DOM了。

不过在这次开始使用React之前，我只是一个学习了半年JS的编程菜鸟，完全没有使用原生JS编写完整项目的经验；哦对了，如果之前用原生JS编写的博客也算完整项目的话…

我很担心我赢弱的原生JS基础，会成为以后的一块绊脚石。现在的我对象这块还是非常不熟悉的，诸如工厂模式，原型链什么的。阿呀，都是过去欠下的债，现在需要一一偿还了。

扯远了，在开始撸码之前，发现React有了一个很有意思的新特性 — Hooks。

大致过滤了一遍之后，我就全面抛弃了之前的Class App extend React.Component这种写法，再也不用写componentDidMount和this.setState这种啰嗦的语法了…

哈哈哈，开玩笑，从我大致接触React到知道Hooks特性为止，我写过的React代码不超过100行，可以说我写React就是直接用Hooks开始的。

useState这个hook返回一个包含两个元素的数组，可以用解构赋值的方法将其解构出来;

import React, { useState } from "React";

export default function App() {
    const [open, setOpen] = useState(false);

    ...

    setOpen(true);
    // setOpen(open => !open);

    ...
}

这两个元素我们可以随意命名，其中第一个元素就是我们需要的state，它的初始值是调用useState方法时传入的参数；

第二个元素是用来修改第一个元素值的方法，使用方法如上图;

useEffect可以看作是将之前的几个不同生命周期合而为一的产物，它接受两个参数，第一个参数为函数，第二个参数为数组，当数组里的值发生变化时，它会执行传入的第一个函数。

具体使用方法可以看官网文档，我这里只写出我最常用的场景。

开局一条狗，装备全靠打！

咳咳走错片场了…

---

在页面初始化时异步获取数据:

import React, { useState, useEffect } from "React";
import http from "./tools";

export default function Home() {
    const [postList, setPostList] = useState([]);
    useEffect(() => {
        async function getPost() {
            const { data, status } = await http.get("https://example.com/api/post");
            if (status === 200) {
                setPostList(data);
            }
            ...
        };
        getPost();
    }, []);

    ...
}

如果只需要在组件第一次挂载时执行一次，而此后不需要再次执行，那么第二个参数为空数组即可。

另外第一个参数不能是异步函数，只能将异步操作写成函数再调用。

---

切换城市时切换相应城市的天气：

import React, { useState, useEffect } from "React";
import http from "./tools";

export default function App({cityList}) {
    const [weather, setWeather] = useState({});
    const [city, setCity] = useState('上海');

    function toggleCity({currentTarget}) {
        ...
        const { value } = currentTarget;
        if (...) {
            ...
            ...
            setCity(value);
        }
    }

    useEffect(() => {
        async function getWeather() {
            const { data, status } = http.get(`https://example.com/api/city=${city}`);
            if (status === 200) setWeather(data);
        };
        getWeather();
    }, [city]);

    return (
        <div>
            {
                cityList && cityList.map((i, index) => 
                    <button 
                        key={index}
                        value={i}
                        onClick={toggleCity}
                    >
                        {i}
                    </button>
                )
            }
            {
                Object.keys(city).length !== 0 
                && 
                <div>
                    {
                        ...
                    }
                </div>
            }
        </div>
    );
}

是抄袭吗

没错了，是抄袭。

这个博客样式、布局完全抄袭自EYHN的幻想贴，不过代码什么的完全是我自己编写的，力图做到还原度100%。

之前用原生JS写的博客还原度只有90%的样子，细节方面还差的远。

这次使用React重写后，还原度个人感觉已经达到了97%，其他地方的细节有点棘手无从下手，待以后水平提高后再来完善吧。

新功能

在幻想贴基础上添加了以下功能：

分页组件
标签组件
分类组件
全局快捷按钮组件

总感觉我的博客页面非常卡，有待后续优化，不过得等我功力大增之后了。